<template>
	<view class="back">
		<template v-if="!show">
			<view class="top d_f j_c_s_b a_i_c">
				<image src="../../static/logo.png" mode="" class="logo"></image>
				<view class="f_c_f" @tap="show=true">Menu</view>
			</view>
			<view class="videoContainer">
				<video class="fullscreenVideo" id="bgVid" src="../../static/video.mp4" :muted="true" :controls="false"
					object-fit="cover" :autoplay="true" :loop="true" webkit-playsinline="true" x-webkit-airplay="true"
					playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5"
					x5-video-player-fullscreen="true" preload="auto"></video>
				<view class="video_tips">join us in shaping the future of technology.</view>
				<view class="switch d_f j_c_c a_i_c">
					<image src="../../static/close.png" mode="" class="close" v-if="close" @tap="suspend"></image>
					<image src="../../static/open.png" mode="" class="close" v-else @tap="open"></image>
				</view>
			</view>
		</template>
		<view v-if="show" class="dialog">
			<view class="top d_f j_c_s_b a_i_c">
				<image src="../../static/logo.png" mode="" class="logo"></image>
				<view class="f_c_f" @tap="show=false">Close</view>
			</view>
			<view class="tab">
				<view v-for="(item,index) in arr" :key="index" class="box d_f a_i_c" :class="index>0?'top_none':''">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="back1" v-if="!show">
			<view class="index">
				<view class="title">Core Values</view>
				<view class="d_f j_c_s_b">
					<view class="width">
						<view class="size">Audacious</view>
						<view class="size1">We make big bets and are unafraid togo against established norms</view>
					</view>
					<view class="width">
						<view class="size">Thoughtful</view>
						<view class="size1">WWe tharoughly cansider theconsequences of our wark andwelcomne heterogeneity af thought</view>
					</view>
				</view>
				<view class="d_f j_c_s_b">
					<view class="width">
						<view class="size">Woprelentious</view>
						<view class="size1">We're undeterred by the "boring wurkand not motiated to prove we haethe best ideas.</view>
					</view>
					<view class="width">
						<view class="size">Pagmalic &lmpac-Driver</view>
						<view class="size1">here a comnpeny of buiders who caredeeply about realworld implicationsand epplications</view>
					</view>
				</view>
				<view class="d_f j_c_s_b">
					<view class="width">
						<view class="size">Collaborative</view>
						<view class="size1">Many of our biggest advances graw cut of work done across multiple teams</view>
					</view>
					<view class="width">
						<view class="size">Grontonented</view>
						<view class="size1">We beleve in the power oft feedbackand encourage a mindset of continuus learning and growth</view>
					</view>
				</view>
				
			</view>
			<image src="../../static/info.png" mode="" class="info"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoContext: null,
				show: false,
				close: true,
				arr: [{
						name: 'try chatGPT',
						path: ''
					},
					{
						name: 'login',
						path: ''
					},
					{
						name: 'project',
						path: ''
					},
					{
						name: 'wallet',
						path: ''
					},
					{
						name: 'about',
						path: ''
					},
				]
			}
		},
		components: {

		},
		methods: {
			suspend() {
				this.close = false
				this.videoContext.pause()
			},
			open() {
				this.close = true
				this.videoContext.play()
			}
		},
		onShow() {

		},
		onLoad(options) {

		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('bgVid', )
		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.back {
		width: 100%;
		background: #000;

		.top {
			padding-top: 26rpx;
			width: calc(100% - 52rpx);
			height: 128rpx;
			margin-left: 26rpx;
			z-index: 100;
			position: absolute;

			.logo {
				width: 252rpx;
				height: 64rpx;
			}

		}

		.dialog {
			background: #000;
			width: 100%;
			height: 100vh;

			.tab {
				position: absolute;
				width: calc(100% - 52rpx);
				top: 200rpx;
				margin-left: 26rpx;

				.box {
					height: 76rpx;
					border: 1rpx solid #fff;
					border-left: none !important;
					border-right: none !important;
					font-size: 32rpx;
					color: #fff;
				}
				.top_none{
					border-top: none !important;
				}
			}
		}

		.videoContainer {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100vh;

			.video_tips {
				position: absolute;
				color: #fff;
				bottom: 100rpx;
				font-size: 84rpx;
				margin-left: 26rpx;
			}

			.switch {
				position: absolute;
				bottom: 26rpx;
				right: 26rpx;
				width: 88rpx;
				height: 88rpx;
				background: #000;

				.close {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.fullscreenVideo {
			width: 100%;
			height: 100%;

		}

	}

	.back1 {
		width: 100%;
		background: #000;
		position: absolute;
		top: 100vh;
        padding-bottom: 166rpx;
		.index {
			margin-left: 26rpx;
			width: calc(100% - 52rpx);

			.title {
				margin-top: 40rpx;
				color: #fff;
				font-size: 50rpx;
				font-weight: 700;
			}

			.width {
				width: 49%;
				color: #fff;

				.size {
					font-size: 40rpx;
					font-weight: 700;
					margin-top: 20rpx;
				}

				.size1 {
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
			
		}
		.info{
			width: 100%;
			height: 126rpx;
			position: absolute;
			bottom: 0rpx;
		}
	}
</style>
